import React,{useEffect} from 'react'
import { Button,  Form, Input,Card,message } from 'antd';
import type {addHospitalParamType} from "@/api/hospital/model/hospitalSetTypes"
import style from "../index.module.css"
import { addhosListRequest,getHosSetFormIdRequest,updateHosSetFromIdRequest} from '@/api/hospital/hospitalSet';
import { useNavigate,useParams } from 'react-router-dom';


export default function AddOrUpdateHosSet() {
// 通过Form组件上的一个useForm方法,可以创建实例,然后在某一个Form组件上添加一个form属性,值为当前的实例(因为是数组解构,自定义名称随意),那么Form表单和当前的form实例就关联起来了
  const [form]=Form.useForm()
 
  const navigate=useNavigate()
// 路由之间传参
  const {id}=useParams();
  // console.log(id, "iddddd");

  useEffect(()=>{
   
    // 因为组件复用,在新增医院的时候不需要刚进入就发送请求,所以要判断当前是否有id
   if(id){
    const getHosDetail=async()=>{
     const result= await getHosSetFormIdRequest(id)
    //  console.log(result,"upresult")//直接就是一个对象

    //  Form 实例上有一个setFieldsValue方法,可以把一个对象的值通过Key(没有可以就是rowkey) 和 表单的name一一对应的形式添加到表单里
        form.setFieldsValue(result)
    }
    getHosDetail();
   }
   
  },[])

  // 1.新增医院的事件回调函数
  // 1.1 表单中的onFinish事件 得到值
  const addhosListHandle= async (fieldValue:addHospitalParamType)=>{
     //判断当前组件中是否存在id 如果有则代表修改,没有则代表新增
    if(id){
      await updateHosSetFromIdRequest({...fieldValue,id});
      // 修改成功以后返回医院设置页面
      navigate("/syt/hospital/hospitalSet")
      message.success('修改数据成功')
    }else{
       // 1.2发送新增请求
       await addhosListRequest(fieldValue);
       //  1.3 新增成功以后返回医院设置页面
        navigate("/syt/hospital/hospitalSet")
        message.success('新增数据成功')
    }
   
  }
  // 2.点击返回按钮 返回的事件回调
  const gobackHandle=()=>{
    navigate(-1)
  }
  return (
   <Card>
     <Form 
     form={form}
      name="basic"
      labelCol={{ span: 3}}
      wrapperCol={{span: 18}}
      onFinish={addhosListHandle}
    >
      <Form.Item
        label="医院名称"
        name="hosname"
        rules={[{
          required: true,
          message: '请输入医院名称',
          transform(value) {
            return value.trim()
          }
        }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="医院编号"
        name="hoscode"
        rules={[{
          required: true,
          message: '请输入医院编号',
          transform(value) {
            return value.trim()
          }
        }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Api基础路径"
        name="apiUrl"
        rules={[{
          required: true,
          message: '请输入Api基础路径',
          transform(value) {
            return value.trim()
          }
        }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="联系人姓名"
        name="contactsName"
        rules={[{
          required: true,
          message: '请输入联系人姓名',
          transform(value) {
            return value.trim()
          }
        }]}
      
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="联系人手机"
        name="contactsPhone"
        rules={[{
          required: true,
          message: '请输入联系人手机',
          transform(value) {
            return value.trim()
          }
        }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        wrapperCol={{ offset: 3}}
      >
        <Button type="primary" className={style.mr} htmlType="submit">
          保存
        </Button>
        <Button type="default" onClick={gobackHandle} htmlType="button">
          返回
        </Button>
      </Form.Item>
    </Form>
   </Card>
  )
}




